<nz-tabset>
  <nz-tab nzTitle="轮播图配置">
    <button style="margin-left: 10px;" nz-button nzType="primary" (click)="showEditModel('1')">添加轮播图</button>
    <div nz-row>
      <div nz-col nzSpan="6" style="padding: 10px;" *ngFor="let item of imageList">
        <nz-card [nzCover]="coverTemplate" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
          <nz-card-meta [nzTitle]="item.image_name">
          </nz-card-meta>
        </nz-card>
        <ng-template #nzDescription>
          <div>{{item.refLink}}</div>
        </ng-template>
        <ng-template #coverTemplate>
          <div style="height: 200px;">
            <img style="width: 100%; height: 100%; border: 1px solid #f0f0f0;" alt="example" [src]="item.image" />
          </div>
        </ng-template>
        <ng-template #actionSetting>
          <!-- <i nz-icon nzType="setting"></i> -->
          <!-- <span (click)="showEditModel('0', item)">修改</span> -->
          <a nz-dropdown [nzDropdownMenu]="menu">
            <i nz-icon nzType="setting"></i>
          </a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item><a (click)="showEditModel('0', item)">修改</a></li>
              <li nz-menu-item><a nz-popconfirm nzPopconfirmTitle="确定发布该条轮播图吗？" nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="pubHeadImage(item, 1)">发布</a></li>
              <li nz-menu-item><a (click)="pubHeadImage(item, 0)">取消</a></li>
            </ul>
          </nz-dropdown-menu>
        </ng-template>
        <ng-template #actionEdit>
          <nz-tag [nzColor]="'blue'">{{item.is_pub | keyMap:'Publish'}}</nz-tag>
        </ng-template>
        <ng-template #actionEllipsis>
          <span><a nz-popconfirm nzPopconfirmTitle="确定删除该条轮播图吗？" nzPopconfirmPlacement="bottom"
              (nzOnConfirm)="confirmDelete(item)">删除</a></span>
        </ng-template>
      </div>
    </div>
  </nz-tab>
  <nz-tab nzTitle="新闻管理">
    <nz-row>
      <nz-col nzSpan="24">

        <span>标题：</span>
        <input style="max-width: 200px;" [(ngModel)]="searchValue" name="searchValue" nz-input id="searchValue"
          placeholder="请输入查询关键字">
        <span>&nbsp;&nbsp;</span>
        <button (click)="search()" nzType="primary" nz-button>查询</button>
        <span>&nbsp;&nbsp;</span>
        <button (click)="resetSearch()" nz-button>重置</button>
        <span>&nbsp;&nbsp;</span>
        <button (click)="openNewsModel('1')" nzType="primary" nz-button>添加新闻</button>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" style="margin-top: 10px;">
      <nz-col nzSpan="24">
        <nz-table #tb_index nzShowSizeChanger="true" nzSize="middle" [nzData]="newsList"
          [nzLoading]="pageRequest.loading" [nzFrontPagination]="false" [nzTotal]="pageRequest.totalSize"
          [(nzPageIndex)]="pageRequest.pageNum" [(nzPageSize)]="pageRequest.pageSize"
          (nzPageIndexChange)="indexSearchData('index')" (nzPageSizeChange)="indexSearchData('size')">
          <thead>
            <tr>
              <th>序号</th>
              <th>标题</th>
              <!-- <th>描述</th> -->
              <th>作者</th>
              <th>创建时间</th>
              <th>更新时间</th>
              <th>是否发布</th>
              <th>链接/预览</th>
              <th>发布/取消</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of tb_index.data">
              <td>{{item.id}}</td>
              <td>{{item.title}}</td>
              <!-- <td>{{item.description}}</td> -->
              <td>{{item.author}}</td>
              <td>{{item.createTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
              <td>{{item.updateTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
              <td>{{item.is_pub | keyMap:'RightOrNot'}}</td>
              <td>
                <a ngxClipboard [cbContent]='articleUri+item.id' (click)="getLink()">链接</a>/<a
                  (click)="preViewArticle(item)">预览</a>
              </td>
              <td>

                <a nz-popconfirm nzPopconfirmTitle="确定要发布该条新闻吗?" nzPopconfirmPlacement="bottom"
                  (nzOnConfirm)="pubArticle(item, 1)">发布</a>/
                <a (click)="pubArticle(item, 0)">取消</a>
              </td>
              <td>
                <a (click)="openNewsModel('0', item)">修改</a>
                /
                <a nz-popconfirm nzPopconfirmTitle="确定要删除改条新闻吗?" nzPopconfirmPlacement="bottom"
                  (nzOnConfirm)="deleteNews(item)">删除</a>
              </td>
            </tr>
          </tbody>
        </nz-table>

      </nz-col>
    </nz-row>
  </nz-tab>

  <nz-modal [(nzVisible)]="isVisible" nzWidth='680px' [nzMaskClosable]='false' [nzTitle]="modelTitle"
    (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">

    <form nz-form name="imageForm">
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">图片名称</nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
          <input nz-input id="image_name" name="image_name" [(ngModel)]="image.image_name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">外链链接</nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
          <input nz-input id="refLink" name="refLink" [(ngModel)]="image.refLink" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="pubTime">发布时间</nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
          <nz-date-picker name="pubTime" nzFormat='yyyy-MM-dd' [(ngModel)]="image.pubTime"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">图片</nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
          <nz-upload [nzAction]="uploadPicAction" (nzChange)="handleChange($event)" [nzShowUploadList]="false"
            [nzLimit]="1">
            <button nz-button><i nz-icon nzType="upload"></i>点击上传图片</button>
          </nz-upload>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">图片预览</nz-form-label>
        <nz-form-control [nzSm]="20" [nzXs]="24">
          <div style="width: 300px; height: 200px;">
            <img [src]="image.image" style="width: 100%; height: 100%;" />
          </div>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-modal>

  <nz-modal (nzAfterOpen)="afterNewsModel()" [(nzVisible)]="isNewsVisible" nzWidth='1280px' [nzMaskClosable]='false'
    [nzTitle]="modelNewsTitle" (nzOnCancel)="handleNewsCancel()" (nzOnOk)="handleNewsOk()"
    [nzOkLoading]="isNewsOkLoading">

    <form nz-form name="newsForm">
      <nz-form-item>
        <nz-form-label [nzSm]="2" [nzXs]="24" nzFor="email">主标题</nz-form-label>
        <nz-form-control [nzSm]="22" [nzXs]="24">
          <input nz-input id="title" name="title" [(ngModel)]="news.title" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="2" [nzXs]="24" nzFor="email">副标题</nz-form-label>
        <nz-form-control [nzSm]="22" [nzXs]="24">
          <input nz-input id="description" name="description" [(ngModel)]="news.description" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="2" [nzXs]="24" nzFor="email">作者</nz-form-label>
        <nz-form-control [nzSm]="22" [nzXs]="24">
          <input nz-input id="author" name="author" [(ngModel)]="news.author" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="2" [nzXs]="24" nzFor="pubTime">发布时间</nz-form-label>
        <nz-form-control [nzSm]="22" [nzXs]="24">
          <nz-date-picker id="pubTime" name="pubTime" nzFormat='yyyy-MM-dd' [(ngModel)]="news.pubTime"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="2" [nzXs]="24" nzFor="email">正文内容</nz-form-label>
        <nz-form-control [nzSm]="22" [nzXs]="24">
          <!-- <input nz-input id="content" name="content" [(ngModel)]="news.content" /> -->
          <div id="content_editor" style="max-height:1500px;width: 100%;">
          </div>
        </nz-form-control>
      </nz-form-item>

    </form>

  </nz-modal>

  <nz-modal [(nzVisible)]="isPreViewShow" nzWidth="960" nzTitle="预览" (nzOnOk)="preViewOk()" nzClosable="false"
    (nzOnCancel)="preViewOk()">
    <iframe [src]="iframeUri | safeUri" frameborder="0" style="width: 100%;height: 800px;"></iframe>
  </nz-modal>
</nz-tabset>